<template>
  <div>
    <el-card>
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label="机构名称" prop="BRANCHNO">
              <!-- <el-popover placement="bottom" width="200" trigger="click" v-model="popoverShow">
                <el-tree :data="treedata" :highlight-current="true" :expand-on-click-node="false" default-expand-all
                  :props="defaultProps" @node-click="handleNodeClick">
                </el-tree>
                <el-input slot="reference" v-model="form.branchName" placeholder="请选择机构"></el-input>
              </el-popover> -->
              <select-tree :tree-data="treedata" :branch="form.branchName" @getBranchName="getBranch"></select-tree>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="班次编号" prop="classId">
              <el-input v-model="form.classId" placeholder="请输入班次编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="班次名称" prop="className">
              <el-input v-model="form.className" placeholder="请输入班次名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="活动类型" prop="actName">
              <el-select v-model="form.actName" clearable placeholder="请选择活动类型">
                <el-option v-for="item in actOptions" :key="item.ACTIVITYTYPE" :label="item.ACTIVITYTYPENAME"
                  :value="item.ACTIVITYTYPE"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg='8' :md='12' class="searchBtnMarginTop">
            <el-button type="primary" icon="el-icon-search" @click="queryClass" size='mini'>查询
            </el-button>
          <!-- </el-col>
          <el-col :lg="2" :md="3" class="searchBtnMarginTop"> -->
            <el-button type="warning" size="mini" icon="el-icon-refresh" @click="resetForm('form')">重置</el-button>
          <!-- </el-col>
          <el-col :lg="2" :md="3" class="searchBtnMarginTop"> -->
            <el-button type="primary" size="mini" @click="addClass" icon="el-icon-plus">新增班次</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="tableData" :row-key="getRowKeys" :expand-row-keys="expands" style="width: 100%;margin-top:10px;"
        :row-class-name="tableRowClassName">
        <el-table-column prop="EVENT" type="expand">
          <template slot-scope="scope" v-if="scope.row.EVENT.length!=0">
            <el-table :data="scope.row.EVENT" :header-cell-style="tableHeaderStyle" :row-class-name="eventRowClassName">
              <el-table-column prop="CLASSESEVENTID" label="班次事件编号" width="120"></el-table-column>
              <el-table-column prop="CLASSESEVENTNAME" label="班次事件名称" width="120"></el-table-column>
              <el-table-column prop="ACTIVITYTYPE" label="活动类型"></el-table-column>
              <el-table-column prop="HOURS" label="时长"></el-table-column>
              <el-table-column label="开始时间类型" prop="SRTTIMETYPE" width="120">
                <template slot-scope="scope">
                  <span>{{scope.row.SRTTIMETYPE === "0"?"绝对时间":(scope.row.SRTTIMETYPE === "1"?"相对于班次开始时间":(scope.row.SRTTIMETYPE === "2"?"相对于班次结束时间":"任意时间"))}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="SRTTIME" label="开始时间"></el-table-column>
              <el-table-column prop="ENDTIME" label="结束时间"></el-table-column>
              <el-table-column prop="ISPAID" label="是否带薪">
                <template slot-scope="scope">
                  <span>{{scope.row.ISPAID === "1"?"是":"否"}}</span>
                </template>
              </el-table-column>
              <el-table-column label="最少次数" prop="MINTIMES" width="100"></el-table-column>
              <el-table-column label="最多次数" prop="MAXTIMES" width="100"></el-table-column>
              <el-table-column prop="NOTES" label="说明"></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="50" align="center">
          <!-- <template slot-scope="scope">
            <div>
              {{}}}
            </div>
          </template> -->
        </el-table-column>
        <el-table-column prop="CLASSESID" label="班次编号" width="120">
        </el-table-column>
        <el-table-column prop="CLASSESNAME" label="班次名称" align="center">
        </el-table-column>
        <el-table-column prop="ACTIVITYTYPE" label="活动编号" align="center">
        </el-table-column>
        <el-table-column prop="ACTIVITYTYPENAME" label="活动名称" align="center">
        </el-table-column>
        <el-table-column prop="HOURS" label="时长" align="center">
        </el-table-column>
        <el-table-column prop="SRTTIME" label="开始时间" align="center">
        </el-table-column>
        <!-- <el-table-column prop="MININTERVAL" label="最短间隔" align="center">
        </el-table-column>
        <el-table-column prop="MAXINTERVAL" label="最长间隔" align="center">
        </el-table-column> -->
        <el-table-column prop="NOTES" label="说明" align="center">
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="180">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="updateClass(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="delClass(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col>
          <el-pagination style="text-align: right; margin-top:20px;" :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize" @size-change="handleInSizeChange" @current-change="handleInCurrentChange"
            :current-page="currpage" background layout="sizes, total, prev, pager, next, jumper" :total="tableTotal">
          </el-pagination>
        </el-col>
      </el-row>
      <component :is="dialogList.editDialog" :option="editOptions" @ListenClass="queryClass"></component>

    </el-card>
  </div>
</template>
<script>
  import request from "@/common/utils/requestWFM";
  import branchQuery from '@/message/wfm/baseData/branchManage/branchQuery'
  import Query from '@/message/wfm/scheduleDataManage/classManage/classQuery'
  import Del from '@/message/wfm/scheduleDataManage/classManage/classDel'
  import Update from '@/message/wfm/scheduleDataManage/classManage/classUpdate'
  import editDialog from './dialog/editDialog'
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import ActivityQuery from '@/message/wfm/scheduleDataManage/activityManage/actQuery';
  import selectTree from "@/components/selectTree5/";

  export default {
    components: {
      selectTree
    },
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'BRANCHNAME'
        },
        popoverShow: false,
        resData: "",
        treedata: [],
        actOptions: [], //活动类型
        tableTotal: 1,
        currpage: 1,
        pageSize: getGlobalParams.get("PageSize"),
        form: { //表单数据
          classId: "",
          className: "",
          actName: "",
          branchNO: this.$store.getters.BranchNum,
          branchName: this.$store.getters.BranchName,
        },
        dialogList: {
          editDialog
        },
        input: '',
        tableData: [],
        getRowKeys(row) {
          return row.CLASSESID;
        },
        editOptions: {
          isShow: false,
          title: '',
          row: {},
          treedata: []
        },
        expands: [],

      }
    },
    mounted() {
      this.queryClass()
      this.actQuery()
    },
    methods: {
      getBranch(data) {
        // console.log(data)
        this.form.branchName = data.BRANCHNAME
        this.form.branchNO = data.BRANCHNO
        // this.ruleForm.branchNO = data.BRANCHNO
        this.popoverShow = false
        // this.nodeclick = data.GroupName
        // this.queryGroupId = data.GroupId
        // if (!data.children) {
        //   this.quesTypeName = data.GroupName
        //   this.ruleForm.typeId = data.GroupId //获取到问题分类的groupId
        //   this.queryModel()
        //   this.popoverShow = false
        // } else if (data.GroupId == '1') {
        //   this.ruleForm.typeId = data.GroupId
        //   this.queryGroupId = ''
        //   this.nodeclick = ''
        //   this.quesTypeName = data.GroupName
        //   this.queryModel()
        // } else {
        //   this.nodeclick = ''
        // }
      },
      // 活动查询
      async actQuery() {
        let resBody = new ActivityQuery()
        resBody.data.CurrPage = 1;
        resBody.data.ACTIVITYCATEG = '01';
        resBody.data.PageRowNum = 20;
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.actOptions = response.BODY.RSPSTRUCT
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      resetForm(formName) { //重置查询表单
        this.$refs["" + formName].resetFields();
        // this.checkedIds = [];
      },
      // 修改班次
      updateClass(row) {
        this.editOptions.isShow = true
        this.editOptions.title = '修改班次'
        this.editOptions.row = row
        this.editOptions.row.branchNO = this.form.branchNO
        this.editOptions.row.branchName = this.form.branchName
        this.editOptions.treedata = this.treedata
        // console.log(this.treedata)
      },
      // 新增班次
      addClass() {
        this.editOptions.isShow = true
        this.editOptions.title = '新增班次'
        this.editOptions.treedata = this.treedata
      },
      // 班次查询
      async queryClass() {
        let resBody = new Query()
        resBody.data.BRANCHNO = this.form.branchNO
        resBody.data.CLASSESID = this.form.classId
        resBody.data.CLASSESNAME = this.form.className
        resBody.data.ACTIVITYTYPE = this.form.actName
        resBody.data.CurrPage = this.currpage;
        resBody.data.PageRowNum = this.pageSize;
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.tableTotal = response.BODY.TotalRowNum;
          this.tableData = response.BODY.RSPSTRUCT
          this.form.branchName = response.BODY.BRANCHNAME
          this.form.branchNO = response.BODY.BRANCHNO
          this.tableData.forEach(item => {
            if (item.EVENT != 0) {
              this.expands.push(item.CLASSESID)
            }
          });
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      //前端分页
      handleInCurrentChange(val) {
        this.currpage = val;
        // console.log(`当前页: ${val}`);
        this.queryClass()
      },
      handleInSizeChange(val) {
        this.pageSize = val;
        this.queryClass()
      },
      // 删除班次
      delClass(row) {
        this.$confirm('此操作将删除该班次, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let resBody = new Del()
          resBody.data.CLASSESID = row.CLASSESID
          let response = await request(resBody);
          if (response.SYS_HEAD.ReturnCode == "000000") {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.queryClass()
          } else {
            this.$message({
              type: "error",
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      tableRowClassName(
        row,
        rowIndex
      ) {
        // console.log(row.row.EVENT.length)
        return row.row.EVENT.length == 0 ? 'expand' : '';
      },
      eventRowClassName(
        row,
        rowIndex
      ) {
        // console.log(row.row.EVENT.length)
        return 'success-row'
      },
      tableHeaderStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        return 'background-color:#C1E0B8;'
      }
    },
  }

</script>
<style lang="scss">
  .expand .el-table__expand-column .cell {
    display: none;
  }

  .el-table .warning-row {
    background: #e4e1e1;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

</style>
